<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script
      type="text/javascript"
      src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak="
    ></script>
    <style>
      #container {
        width: 800px;
        height: 600px;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
  <script>
    var map = new BMapGL.Map("container"); // 创建Map实例
    map.centerAndZoom(new BMapGL.Point(113.94282, 22.52822), 18); // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

    // var marker1 = new BMapGL.Marker(new BMapGL.Point(113.94282, 22.52822));
    // // 在地图上添加点标记
    // map.addOverlay(marker1);
    // 创建小车图标

    // 创建自定义覆盖物DOM
    function createDOM(feature) {
      const img = document.createElement("img");
      img.style.height = "240px";
      img.style.width = "80px";
      img.src = "./img/moon.png";
      img.draggable = false;
      return img;
    }

    // 创建自定义覆盖物
    const customOverlay = new BMapGL.CustomOverlay(createDOM, {
      point: new BMapGL.Point(113.94282, 22.52822),
      opacity: 0.5,
      map: map,
      offsetY: -10,
      properties: {
        title: "this is a title",
        size: "100",
      },
    });

    // 将自定义覆盖物添加到地图上
    map.addOverlay(customOverlay);

    // var myIcon = new BMapGL.Icon("./img/moon.png", new BMapGL.Size(52, 26));
    // // 创建Marker标注，使用小车图标
    // var pt = new BMapGL.Point(113.94282, 22.52822);
    // var marker = new BMapGL.Marker(pt, {
    //   icon: myIcon,
    // });
    // // 将标注添加到地图
    // map.addOverlay(marker);
  </script>
</html>
